<template>
	<view class="container">
		<view class="tui-header">
			<view class="tui-category" hover-class="opcity" :hover-stay-time="150" @tap="classify">
				<lion-icon name="manage-fill" color="#fff" :size="44" unit="rpx"></lion-icon>
				<view class="tui-category-scale">分类</view>
			</view>
			<view class="tui-rolling-search">
				<lion-icon name="search-2" :size="32" unit="rpx"></lion-icon>
				<!-- <icon type="search" :size="13" color="#999"></icon> -->
				<swiper vertical autoplay circular interval="8000" class="tui-swiper">
					<swiper-item v-for="(item, index) in classifyLists" :key="index" class="tui-swiper-item" @tap="navToproductList(item.productClassifyName)">
						<view class="tui-hot-item">{{ item.productClassifyName }}</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!--header-->
		<view class="tui-header-banner">
			<view class="tui-hot-search">
				<view>热搜</view>
				<view :key="index" v-if="index < 5" v-for="(item, index) in classifyLists" class="tui-hot-tag" @tap="navToproductList(item.productClassifyName)">
					{{ item.productClassifyName }}
				</view>
			</view>
			<view class="tui-banner-bg">
				<!-- <view class="tui-primary-bg tui-route-left"></view>
				<view class="tui-primary-bg tui-route-right"></view> -->
				<!--banner-->
				<view v-if="carouselList.length" class="tui-banner-box">
					<swiper
						:indicator-dots="true"
						:autoplay="true"
						:interval="5000"
						:duration="150"
						class="tui-banner-swiper"
						:circular="true"
						indicator-color="rgba(255, 255, 255, 0.8)"
						indicator-active-color="#fff"
					>
						<swiper-item v-for="(item, index) in carouselList" :key="index" @tap.stop="handleCarousel(item)">
							<image :src="item.carouselUrl" class="tui-slide-image" mode="scaleToFill" />
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>

		<SpecialItem :style="carouselList.length ? 'margin-top: 88upx;' : 'margin-top: -130upx;'"></SpecialItem>

		<view v-if="productList.length" class="tui-product-box">
			<view class="tui-product-list">
				<view class="tui-product-container">
					<block v-for="(item, index) in productList" :key="index" v-if="(index + 1) % 2 != 0">
						<!--商品列表-->
						<view class="tui-pro-item" hover-class="hover" :hover-start-time="150" @tap="navTodetail(item.productId, 'simple')">
							<image :src="item.productCoverUrl" class="tui-pro-img" mode="widthFix" />
							<view class="tui-pro-content">
								<view class="tui-pro-tit">{{ item.productName }}</view>
								<view>
									<view class="tui-pro-price">
										<text class="tui-sale-price">￥{{ item.minProductSkuPrice }}</text>
										<!-- <text class="tui-factory-price">￥{{ item.productGroupPrice }}</text> -->
									</view>
								</view>
							</view>
						</view>
					</block>
				</view>
				<view class="tui-product-container">
					<block v-for="(item, index) in productList" :key="index" v-if="(index + 1) % 2 == 0">
						<!--商品列表-->
						<view class="tui-pro-item" hover-class="hover" :hover-start-time="150" @tap="navTodetail(item.productId, 'simple')">
							<image :src="item.productCoverUrl" class="tui-pro-img" mode="widthFix" />
							<view class="tui-pro-content">
								<view class="tui-pro-tit">{{ item.productName }}</view>
								<view>
									<view class="tui-pro-price">
										<text class="tui-sale-price">￥{{ item.minProductSkuPrice }}</text>
										<!-- <text class="tui-factory-price">￥{{ item.productGroupPrice }}</text> -->
									</view>
									<!-- 	<view class="tui-pro-pay">
									<text>{{ item.productPortionNum }}人开团</text>
	
									<text>已拼{{ item.participationNum }}件</text>
								</view> -->
								</view>
							</view>
						</view>
					</block>
				</view>
			</view>
		</view>
		<!-- 
		<view v-if="dailySpecialsList.length" class="tui-product-box tui-pb-20 tui-bg-white">
			<view class="tui-group-name" @tap="navTo('daily')">
				<text>每日特价</text>
				<lion-icon name="arrowright" :size="38" unit="rpx" color="#555"></lion-icon>
			</view>
			<view class="tui-new-box">
				<view
					class="tui-new-item"
					:class="[index != 0 && index != 1 ? 'tui-new-mtop' : '']"
					v-for="(item, index) in dailySpecialsList"
					:key="index"
					@tap="navTodetail(item.id, 'daily')"
				>
					<image src="/static/images/mall/new/new.png" class="tui-new-label"></image>
					<view class="tui-title-box">
						<view class="tui-new-title">{{ item.productName }}</view>
						<view class="tui-new-price">
							<text class="tui-new-present">￥{{ item.minProductDailySpecialsSkuPrice }}</text>
							<text class="tui-new-original">￥{{ item.minProductSkuPrice }}</text>
						</view>
					</view>
					<image :src="item.productCoverUrl" class="tui-new-img"></image>
				</view>
			</view>
		</view>

		<view v-if="productList.length" class="tui-product-box">
			<view class="tui-group-name" @tap="navTo('group')">
				<text>拼购</text>
				<lion-icon name="arrowright" :size="38" unit="rpx" color="#555"></lion-icon>
			</view>
			<view class="tui-product-list">
				<view class="tui-product-container">
					<block v-for="(item, index) in productList" :key="index" v-if="(index + 1) % 2 != 0">
						<view class="tui-pro-item" hover-class="hover" :hover-start-time="150" @tap="navTodetail(item.id, 'group')">
							<image :src="item.productCoverImg" class="tui-pro-img" mode="widthFix" />
							<view class="tui-pro-content">
								<view class="tui-pro-tit">{{ item.productName }}</view>
								<view class="tui-process"><lionProcess :process="item.process"></lionProcess></view>
								<view>
									<view class="tui-pro-pay">
										<text>{{ item.productPortionNum }}人开团</text>

										<text>已拼{{ item.process }}%</text>
									</view>
									<view class="tui-pro-price">
										<view class="tui-sale-price">
											{{ item.eachUnitPrice }}
											<text style="font-size: 20upx;">抵扣券</text>
										</view>
										<text class="tui-factory-price">￥{{ item.productGroupPrice }}</text>
									</view>
								</view>
							</view>
						</view>
					</block>
				</view>
				<view class="tui-product-container">
					<block v-for="(item, index) in productList" :key="index" v-if="(index + 1) % 2 == 0">
						<view class="tui-pro-item" hover-class="hover" :hover-start-time="150" @tap="navTodetail(item.id, 'group')">
							<image :src="item.productCoverImg" class="tui-pro-img" mode="widthFix" />
							<view class="tui-pro-content">
								<view class="tui-pro-tit">{{ item.productName }}</view>
								<view class="tui-process"><lion-process :process="item.process"></lion-process></view>
								<view>
									<view class="tui-pro-pay">
										<text>{{ item.productPortionNum }}人开团</text>

										<text>已拼{{ item.process }}%</text>
									</view>
									<view class="tui-pro-price">
										<view class="tui-sale-price">
											{{ item.eachUnitPrice }}
											<text style="font-size: 20upx;">抵扣券</text>
										</view>
										<text class="tui-factory-price">￥{{ item.productGroupPrice }}</text>
									</view>
								</view>
							</view>
						</view>
					</block>
				</view>
			</view>
		</view> -->
		<tui-modal
			@click="handleClick"
			@cancel="handleCancel"
			:button="modalContent.button"
			:title="modalContent.title"
			:content="modalContent.content"
			:show="modalVisible"
		></tui-modal>
		<!-- <Loading v-if="loading"></Loading> -->
		<view v-if="!loading && productList.length" class="loading-more"><text class="loading-more-text">~~没有更多了~~</text></view>

		<view class="tui-safearea-bottom"></view>
		<Loading type="img" v-if="loading"></Loading>
		<updateAppTip></updateAppTip>
	</view>
</template>
<script>
import { carouselList } from '@/service/home.js';
import { unreadList } from '@/service/notify.js';
import { getUserInfo } from '@/service/mine.js';
import SpecialItem from '@/components/views/SpecialItem.vue';
import { dailySpecialsListPage, classifyList, grouplistPage, productListPage } from '@/service/shop.js';
import updateAppTip from '@/components/updateAppTip.vue';

export default {
	components: {
		SpecialItem,
		updateAppTip
	},
	data() {
		return {
			current: 0,
			modalVisible: false,
			modalContent: {
				title: '标题',
				content: '通知',
				color: '',
				button: [{ text: '下一条', type: 'white', plain: true }, { text: '查看详情', type: 'primary', plain: false }]
			},

			hotSearch: ['休闲零食', '自热火锅', '小冰箱迷你'],
			banner: [],

			dailySpecialsList: [],
			loading: true,
			pageIndex: 1,
			loadding: false,
			pullUpOn: true,
			carouselList: [],
			unreadList: [],
			classifyLists: [],
			pageNum: 1,
			productList: []
		};
	},
	onLoad() {
		this.getCarouselList();
		this.getDailySpecialsListPage();

		this.getClassifyList();
		this.getUserInfo();
		this.getGrouplistPageList();
	},
	onShow() {
		this.getUnreadList();
	},
	onReachBottom() {
		this.getGrouplistPageList();
	},
	methods: {
		async getUserInfo() {
			const resp = await getUserInfo();
			this.userInfo = resp;
			this.$store.commit('saveuserinfo', resp);
		},
		async getClassifyList() {
			const resp = await classifyList();
			if (resp && Array.isArray(resp)) {
				resp.forEach(v => {
					this.classifyLists = [...this.classifyLists, ...v.children];
				});
			}
		},
		async getDailySpecialsListPage() {
			try {
				this.loading = true;
				const resp = await dailySpecialsListPage({ pageNum: 1, pageSize: 6 });
				if (resp) {
					this.dailySpecialsList = resp.data;
				}
			} catch (e) {
				//TODO handle the exception
			} finally {
				this.loading = false;
			}
		},
		// async getGrouplistPageList() {
		// 	const resp = await grouplistPage({ pageNum: this.pageNum, pageSize: 10 });
		// 	if (resp) {
		// 		this.productList = resp.data;
		// 	}
		// },
		async getGrouplistPageList() {
			try {
				this.loading = true;
				const resp = await productListPage({
					pageNum: this.pageNum,
					pageSize: this.pageSize || 10,
					productName: this.key || '',
					productClassifyId: this.productClassifyId || '',
					distributionFlag: 'n'
				});
				this.productList = this.pageNum == 1 ? resp.data : [...this.productList, ...(resp.data || [])];
				this.pageNum++;
			} finally {
				this.loading = false;
			}
		},
		handleCancel(e) {
			this.modalVisible = false;
		},
		navTo(type) {
			if (type == 'group') {
				uni.navigateTo({
					url: '/pages/index/groupList/groupList'
				});
			}
			if (type == 'daily') {
				uni.navigateTo({
					url: '/pages/index/dailyList/dailyList'
				});
			}
		},
		navToproductList(key) {
			uni.navigateTo({
				url: '/pages/index/productList/productList?searchKey=' + key
			});
		},
		handleClick({ index }) {
			if (index == 0) {
				if (this.unreadList.userUnreadNotifyVos && this.unreadList.userUnreadNotifyVos.length === 1) {
					return this.$msg('已是最后一条');
				}
				this.setModelContent();
			} else {
				this.$store.commit('save', this.unreadList.userUnreadNotifyVos[this.modalContent.index]);
				uni.navigateTo({
					url: '/pages/mine/message/detail'
				});
				this.modalVisible = false;
			}
		},
		async getCarouselList() {
			const resp = await carouselList();
			if (resp) {
				this.carouselList = resp;
			}
		},
		async getUnreadList() {
			this.unreadList = await unreadList();
			if (Array.isArray(this.unreadList.userUnreadNotifyVos)) {
				this.unreadList.userUnreadNotifyVos = this.unreadList.userUnreadNotifyVos.filter(v => v.popupFlag == 'y');
				this.modalVisible = this.unreadList.userNotifyUnreadNum !== 0;
				this.modalContent.index = 0;
				this.setModelContent();
			}
		},
		setModelContent() {
			if (this.modalVisible) {
				const resp = this.unreadList.userUnreadNotifyVos[this.modalContent.index];
				this.modalContent.content = resp.notifyTitle;
				this.modalContent.title = resp.notifyType == 'system' ? '系统消息' : '活动消息';
				this.modalContent.index++;
				if (this.modalContent.index + 1 > this.unreadList.userUnreadNotifyVos.length) {
					this.modalContent.index = 0;
				}
			}
		},
		handleCarousel(item) {
			if (item.carouselType == 'product') {
				uni.navigateTo({
					url: item.skipUrl
				});
			} else {
				uni.navigateTo({
					url: '/pages/web/web?url=' + item.skipUrl
				});
			}
		},

		navTodetail(id, type) {
			uni.navigateTo(
				{
					url: '/pages/shop/productDetail/index'
				},
				{
					id,
					type
				}
			);
		},

		classify() {
			uni.navigateTo({
				url: '../shop/classify/classify'
			});
		},

		search: function() {
			uni.navigateTo({
				url: '../shop/search/search'
			});
		}
	},
	onPullDownRefresh() {
		this.getUnreadList();
		this.getDailySpecialsListPage();
		this.getGrouplistPageList();
		this.getClassifyList();
		setTimeout(v => {
			uni.stopPullDownRefresh();
		}, 1000);
	}
};
</script>

<style lang="scss" scoped>
page {
	background-color: #f7f7f7;
}

.container {
	padding-bottom: 100rpx;
	color: #333;
}

/*tabbar*/

.tui-tabbar {
	width: 100%;
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: space-between;
	z-index: 99999;
	background: #fff;
	height: 100rpx;
	left: 0;
	bottom: 0;
	padding-bottom: env(safe-area-inset-bottom);
}

.tui-safearea-bottom {
	width: 100%;
	height: env(safe-area-inset-bottom);
}

.tui-tabbar::before {
	content: '';
	width: 100%;
	border-top: 1rpx solid #d9d9d9;
	position: absolute;
	top: 0;
	left: 0;
	-webkit-transform: scaleY(0.5);
	transform: scaleY(0.5);
}

.tui-tabbar-item {
	flex: 1;
	width: 25%;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	font-size: 24rpx;
	color: #666;
	height: 80rpx;
}

.tui-ptop-4 {
	padding-top: 4rpx;
}

.tui-scale {
	font-weight: bold;
	transform: scale(0.8);
	transform-origin: center 100%;
	line-height: 30rpx;
}

.tui-item-active {
	color: $uni-color-primary !important;
}

/*tabbar*/

.tui-header {
	width: 100%;
	height: 100rpx;
	padding: 0 30rpx 0 20rpx;
	box-sizing: border-box;
	background-color: $uni-color-primary;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: fixed;
	left: 0;
	top: 0;
	/* #ifdef H5 */
	top: 44px;
	/* #endif */
	z-index: 999;
}

.tui-rolling-search {
	width: 100%;
	height: 60rpx;
	border-radius: 35rpx;
	padding: 0 40rpx 0 30rpx;
	box-sizing: border-box;
	background-color: #fff;
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	color: #999;
}

.tui-category {
	font-size: 24rpx;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	margin: 0;
	margin-right: 22rpx;
	flex-shrink: 0;
}

.tui-category-scale {
	transform: scale(0.7);
	line-height: 24rpx;
}

.tui-icon-category {
	line-height: 20px !important;
	margin-bottom: 0 !important;
}

.tui-swiper {
	font-size: 26rpx;
	height: 60rpx;
	flex: 1;
	padding-left: 12rpx;
}

.tui-swiper-item {
	display: flex;
	align-items: center;
}

.tui-hot-item {
	line-height: 26rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tui-header-banner {
	padding-top: 100rpx;
	box-sizing: border-box;
	background: $uni-color-primary;
}

.tui-hot-search {
	color: #fff;
	font-size: 24rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20rpx;
	box-sizing: border-box;
	position: relative;
	z-index: 2;
}

.tui-hot-tag {
	background-color: rgba(255, 255, 255, 0.15);
	padding: 10rpx 24rpx;
	border-radius: 30rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 24rpx;
}

.tui-banner-bg {
	display: flex;
	height: 180rpx;
	background-color: $uni-color-primary;
	position: relative;
}

.tui-primary-bg {
	width: 50%;
	display: inline-block;
	height: 224rpx;
	border: 1px solid transparent;
	position: relative;
	z-index: 1;
	background-color: $uni-color-primary;
}

.tui-route-left {
	transform: skewY(8deg);
}

.tui-route-right {
	transform: skewY(-8deg);
}

.tui-banner-box {
	width: 100%;
	padding: 0 20rpx;
	box-sizing: border-box;
	position: absolute;
	/* overflow: hidden; */
	z-index: 99;
	bottom: -80rpx;
	left: 0;
}

.tui-banner-swiper {
	width: 100%;
	height: 240rpx;
	border-radius: 12rpx;
	overflow: hidden;
	transform: translateY(0);
}

.tui-slide-image {
	width: 100%;
	height: 240rpx;
	display: block;
}

/* #ifdef MP-WEIXIN */
.tui-banner-swiper .wx-swiper-dot {
	width: 8rpx;
	height: 8rpx;
	display: inline-flex;
	background: none;
	justify-content: space-between;
}

.tui-banner-swiper .wx-swiper-dot::before {
	content: '';
	flex-grow: 1;
	background-color: rgba(255, 255, 255, 0.8);
	border-radius: 16rpx;
	overflow: hidden;
}

.tui-banner-swiper .wx-swiper-dot-active::before {
	background-color: #fff;
}

.tui-banner-swiper .wx-swiper-dot.wx-swiper-dot-active {
	width: 16rpx;
}

/* #endif */

/* #ifndef MP-WEIXIN */
>>> .tui-banner-swiper .uni-swiper-dot {
	width: 8rpx;
	height: 8rpx;
	display: inline-flex;
	background-color: none;
	justify-content: space-between;
}

>>> .tui-banner-swiper .uni-swiper-dot::before {
	content: '';
	flex-grow: 1;
	background-color: rgba(255, 255, 255, 0.8);
	border-radius: 16rpx;
	overflow: hidden;
}

>>> .tui-banner-swiper .uni-swiper-dot-active::before {
	background-color: #fff;
}

>>> .tui-banner-swiper .uni-swiper-dot.uni-swiper-dot-active {
	width: 16rpx;
}

/* #endif */

.tui-product-category {
	background-color: #fff;
	padding: 80rpx 20rpx 30rpx 20rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	font-size: 24rpx;
	color: #555;
	margin-bottom: 20rpx;
}

.tui-category-item {
	width: 20%;
	height: 118rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: column;
	padding-top: 30rpx;
}

.tui-category-img {
	height: 80rpx;
	width: 80rpx;
	display: block;
}

.tui-category-name {
	line-height: 24rpx;
}

.tui-product-box {
	margin-top: 20rpx;
	padding: 0 20rpx;
	box-sizing: border-box;
}

.tui-pb-20 {
	padding-bottom: 20rpx;
}

.tui-bg-white {
	background-color: #fff;
}

.tui-group-name {
	margin-bottom: 20upx;
	background: #fff;
	width: 100%;
	font-size: 32rpx;
	font-weight: bold;
	text-align: center;
	padding: 24rpx 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tui-activity-box {
	display: flex;
	border-radius: 12rpx;
	overflow: hidden;
}

.tui-activity-img {
	width: 50%;
	display: block;
}

.tui-new-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}

.tui-new-item {
	width: 49%;
	height: 200rpx;
	padding: 0 20rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	background: #f5f2f9;
	position: relative;
	border-radius: 12rpx;
}

.tui-new-mtop {
	margin-top: 2%;
}

.tui-title-box {
	font-size: 24rpx;
}

.tui-new-title {
	line-height: 32rpx;
	word-break: break-all;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.tui-new-price {
	padding-top: 18rpx;
}

.tui-new-present {
	color: #ff201f;
	font-weight: bold;
}

.tui-new-original {
	display: inline-block;
	color: #a0a0a0;
	text-decoration: line-through;
	padding-left: 12rpx;
	transform: scale(0.8);
	transform-origin: center center;
}

.tui-new-img {
	width: 160rpx;
	height: 160rpx;
	display: block;
	border-radius: 5upx;
	flex-shrink: 0;
}

.tui-new-label {
	width: 56rpx;
	height: 56rpx;
	border-top-left-radius: 12rpx;
	position: absolute;
	left: 0;
	top: 0;
}

.tui-product-list {
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	flex-wrap: wrap;
	box-sizing: border-box;
	/* padding-top: 20rpx; */
}

.tui-product-container {
	flex: 1;
	margin-right: 2%;
}

.tui-product-container:last-child {
	margin-right: 0;
}

.tui-pro-item {
	width: 100%;
	margin-bottom: 4%;
	background: #fff;
	box-sizing: border-box;
	border-radius: 12rpx;
	overflow: hidden;
}

.tui-pro-img {
	width: 100%;
	display: block;
}

.tui-pro-content {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-sizing: border-box;
	padding: 20rpx;
}

.tui-pro-tit {
	color: #2e2e2e;
	font-size: 26rpx;
	word-break: break-all;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.tui-pro-price {
	padding-top: 10rpx;
}

.tui-sale-price {
	display: inline-block;
	font-size: 34rpx;
	font-weight: 500;
	color: $price-color-primary;
}

.tui-factory-price {
	font-size: 24rpx;
	color: #a0a0a0;
	text-decoration: line-through;
	padding-left: 12rpx;
}

.tui-pro-pay {
	display: flex;
	justify-content: space-between;
	padding-top: 20rpx;
	font-size: 24rpx;
	color: #656565;
}
.tui-process {
	color: #0081ff;
	height: 18upx;
	align-items: center;
}
.view {
	height: 300upx;
	width: 750upx;
}
</style>
